import React from 'react';
import {
  List,
  ListItem,
  ListItemText,
  Typography,
  Button,
  Divider,
  Box,
} from '@material-ui/core';
import { getMortgageList } from '@/apis';
import { useRequest } from '@umijs/hooks';

export const VendorList = () => {
  const { data } = useRequest(() => getMortgageList({ page: 1, pageSize: 20 }));

  return (
    <List>
      {data?.records?.slice(0, 2)?.map((record) => (
        <React.Fragment key={record.mortgageRecordId}>
          <ListItem
            alignItems={'flex-start'}
            secondaryAction={<Button>去验证</Button>}
          >
            <ListItemText
              primary={record.companyName}
              secondary={
                <React.Fragment>
                  <Typography
                    sx={{ display: 'inline-block', mt: 1, mb: 1 }}
                    variant="subtitle1"
                    color="text.primary"
                  >
                    {record.mortgageApplyDate}
                  </Typography>
                  <Box>应收转账金额：{record.amount}</Box>
                </React.Fragment>
              }
            />
          </ListItem>
          <Divider component={'li'} />
        </React.Fragment>
      ))}
    </List>
  );
};
